<template>
	<view class="box">
		<view class="bg"></view>
		<view class="list">
			<!-- 收货信息 -->
			<view class="msg card">
				<!-- 地址 -->
				<view class="address flex" @click="chooseAddress">
					<view class="msg-left" :class="address.address?'f30 bold':''">
						{{address.address||'暂时没有收货地址，请添加'}}
						<text class="msg-range" v-if="!range">(暂不在配送范围内，请修改地址)</text>
					</view>
					<view class="tag f-w">
						<image src="https://jw.xzsw2021.com/static/client/icon_108@2x.png" mode=""></image>
					</view>
				</view>
				<!-- 姓名电话 -->
				<view class="uname f-w f22" v-if="address">
					<view>{{address.real_name}}</view>
					<view class="msg-phone">{{address.phone}}</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="card order-msg">
				<view class="f28 bold">订单信息</view>
				<block v-for="(item,index) in info.order" :key='index'>
					<view class="flex" style="margin-top: 20rpx;" v-for="(item2,index2) in item.list" :key='index'>
						<view class="img">
							<image :src="item2.product.image" mode=""></image>
						</view>
						<view class="right">
							<view class="one fw-bt">
								<view class="one1 hide-line f28">{{item2.product.store_name}}</view>
								<view class="one2 f28 bold">￥{{item2.true_price}}</view>
							</view>
							<view class="two f24 c999 f-w">
								<view class="two1">￥{{item2.productAttr.price}}</view>
								<view class="two2" v-if="item.order.postage_price > 0">邮费￥{{item.order.postage_price}}
								</view>
								<view class="two2" v-if="info.order_total_package_fee > 0 ">
									包装费￥{{info.order_total_package_fee}}</view>
							</view>
							<view class="three f24 c666">x{{item2.cart_num}}</view>
						</view>
					</view>
				</block>
			</view>




			<!-- 备注 -->
			<view class="card note">
				<view class="f28 bold">买家留言</view>
				<view class="">
					<textarea v-model="content" placeholder="输入买家留言" maxlength="-1" auto-height />
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="pay card">
				<view class="f28 bold title">支付方式</view>
				<!-- 微信 -->
				<view class="wx fw-bt" @click="checkPayWx">
					<view class="f-w">
						<view class="img4 f-w">
							<image src="https://jw.xzsw2021.com/static/order/icon_146@2x.png" mode=""></image>
						</view>
						<view class="f26">微信支付</view>
					</view>
					<view class="tag4">
						<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode="" v-if="!pay_wx">
						</image>
						<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else></image>
					</view>
				</view>
				<!-- 余额支付 -->
				<view class="yue fw-bt" @click="checkPayYue">
					<view class="f-w">
						<view class="img4 f-w">
							<image src="https://jw.xzsw2021.com/static/order/icon_147@2x.png" mode=""></image>
						</view>
						<view class="f26">余额支付</view>
					</view>
					<view class="tag4">
						<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode="" v-if="!pay_yue">
						</image>
						<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else></image>
					</view>
				</view>
			</view>

		</view>
		<!-- 支付 -->
		<view class="btn f-w">
			<view class="btn-left">
				<view class="f26 f-w">
					<view class="b1">合计</view>
					<view class="f22 b2">￥</view>
					<view class="bold f40 b3">{{info.order_price}}</view>
				</view>
			</view>
			<view class="btn-right f30 bold" @click="goPay">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '', //订单id
				info: '',
				showMore: false, //展示全部
				range: true, //配送范围
				address: '',
				time: '',
				buy_user: '', //买手信息
				cart: {
					id: 1,
					img: 'https://jw.xzsw2021.com/static/index/tu_18@2x.png',
					title: '饱满海南香蕉 450-饱满海南香蕉',
					price: 9.0,
					old_price: 18.0,
					desc: 'Fweff',
					num: 2
				},
				is_dixian: true, //是否抵现
				pay_wx: true, //支付方式 1微信 0余额
				pay_yue: false,
				content: '', //买家留言
				cart_id: '',
				info1: '',
				todaystar: '',
				todayend: ''
			}
		},
		onLoad(options) {

			this.id = options.id ? options.id : ''
			this.cart_id = options.cart_id
		},
		mounted() {
			// this.$refs.popup4.open()
		},
		onShow() {
			this.gettoday()
			this.check()
		},
		methods: {
			gettoday() {
				let today = new Date();
				let year = today.getFullYear();
				let month = today.getMonth() + 1;
				let day = today.getDate();
				this.todaystar = `${year}-${month}-${day} 00:00:00`
				this.todayend = `${year}-${month}-${day} 23:59:59`



			},
			// 校验
			check() {



				let data = {
					address_id: this.address.address_id,
					cart_id: [this.cart_id],
					takes: [],
					use_coupon: [],
					use_integral: false
				}

				this.$request('v2/order/check', data, 'POST').then(res => {
					this.info1 = res.data
					this.check2()
				})

			},
			check2() {
				let use_coupon = {}

				let list2 = this.info1.order

				list2.forEach(item => {
					let id = item.mer_id
					this.$set(use_coupon, `${id}`, [])
				})

				let data = {
					address_id: this.address.address_id,
					cart_id: [this.cart_id],
					takes: [],
					use_coupon,
					use_integral: false
				}

				this.$request('v2/order/check', data, 'POST').then(res => {
					this.info = res.data

				})
			},



			// 选择收货地址
			chooseAddress() {

				uni.navigateTo({
					url: '/pages/client/address-choose/address-choose?orgin=1'
				})

			},
			// 选择微信支付
			checkPayWx() {
				this.pay_wx = true;
				this.pay_yue = false
			},
			// 选择余额支付
			checkPayYue() {
				this.pay_yue = true;
				this.pay_wx = false
			},
			// 立即支付
			goPay() {

				let use_coupon = {}

				let list2 = this.info1.order

				list2.forEach(item => {
					let id = item.mer_id
					this.$set(use_coupon, `${id}`, [])
				})

				let data = {
					address_id: this.address.address_id,
					cart_id: [this.cart_id],
					mark: this.content,
					order_type: '4',
					pay_type: this.pay_wx ? 'routine' : 'balance',
					takes: [],
					use_coupon,
					use_integral: false,
					buyer_type: 0,
					delivery_start_date: this.todaystar,
					delivery_end_date: this.todayend,
					delivery_time_scope: '00:00-23:59'
				}
				
				
				uni.requestSubscribeMessage({
					tmplIds: ['Gb-9p4oMrDUHDDoovy6oZ4G6GptHSkHyQ_BKzubLkIY'],
					success:re=> {
						uni.showLoading({
							mask: true
						})
						this.$request('v2/order/create', data, 'POST').then(res => {
							if (res.status == 200) {
								if (this.pay_wx) {
									let config = res.data.result.config
									this.paying(config)
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
									if (res.data.status != 'error') {
										uni.redirectTo({
											url: '/pages/state/success/success?type=13'
										})
									}
								}
							}
						
						})
					},
					fail:err=> {
						uni.showLoading({
							mask: true
						})
						this.$request('v2/order/create', data, 'POST').then(res => {
							if (res.status == 200) {
								if (this.pay_wx) {
									let config = res.data.result.config
									this.paying(config)
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
									if (res.data.status != 'error') {
										uni.redirectTo({
											url: '/pages/state/success/success?type=13'
										})
									}
								}
							}
						
						})
					},
					
				})
				
				
				
				

			},
			paying(e) {

				let that = this
				let orderInfo = {
					timeStamp: e.timestamp,
					nonceStr: e.nonceStr,
					package: e.package,
					signType: e.signType,
					paySign: e.paySign,
				}

				wx.requestPayment({
					...orderInfo,

					success: (res) => {

						uni.navigateTo({
							url: '/pages/state/success/success?type=13'
						})

					},
					fail(e) {
						console.log(e)
						wx.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				})

			},

		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		// padding-bottom: 140rpx;
		position: relative;

		.showColor {
			font-weight: bold;
			color: #F45E14;
		}

		.red {
			color: #F83535;
		}

		.bg {
			left: 0;
			top: 0;
			position: absolute;
			width: 750rpx;
			height: 180rpx;
			background: #109C7A;
		}

		.tag {
			margin-left: 15rpx;
			flex-shrink: 0;
			width: 11rpx;
			height: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.list {
			position: relative;
			overflow: hidden;
			z-index: 2;
		}

		.card {
			margin: 0 auto;
			width: 690rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;

		}

		.msg {
			margin-top: 48rpx;
			padding: 20rpx 30rpx 35rpx;

			.msg-left {
				width: 606rpx;
				min-height: 80rpx;
			}

			.tag {
				margin-top: 10rpx;
			}

			.uname {
				.msg-phone {
					margin-left: 30rpx;
				}
			}

		}

		.order-msg {
			margin-top: 20rpx;
			padding: 26rpx 30rpx;

			.img {
				flex-shrink: 0;
				width: 110rpx;
				height: 110rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&>view:nth-child(2) {
				margin-top: 26rpx;
			}

			.right {
				margin-left: 16rpx;
				flex: 1;
				overflow: hidden;

				.one {

					.one1 {
						width: 400rpx;
					}
				}

				.two {
					margin: 4rpx 0 0;

					.two1 {
						text-decoration: line-through;

					}

					.two2 {
						margin-left: 25rpx;

					}
				}
			}
		}

		// 备注
		.note {
			margin-top: 20rpx;
			padding: 38rpx 30rpx;

			.note-text {
				max-width: 500rpx;
			}

			textarea {
				margin-top: 28rpx;
				width: 630rpx;
				min-height: 160rpx;
				padding: 20rpx;
				font-size: 26rpx;
				background: #F6F6F6;
				box-sizing: border-box;
			}
		}

		// 支付方式
		.pay {
			margin-top: 20rpx;
			padding: 30rpx 30rpx 10rpx;

			.img4 {
				margin-right: 30rpx;
				width: 50rpx;
				height: 50rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tag4 {
				width: 30rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.wx {
				padding: 40rpx 0;
			}

			.yue {
				border-top: 1rpx solid #eee;
				padding: 40rpx 0;
			}
		}

		// 支付
		.btn {
			margin: 30rpx auto;
			width: 690rpx;
			height: 110rpx;
			background: #FFFFFF;
			border-radius: 55rpx;
			text-align: center;
			z-index: 11;

			.btn-left {
				width: 460rpx;
				margin-left: 80rpx;

				.b1 {
					margin-top: 2rpx;
				}

				.b2 {
					margin-top: 12rpx;
				}
			}

			.btn-right {
				width: 290rpx;
				height: 110rpx;
				line-height: 110rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				border-radius: 0rpx 55rpx 55rpx 0rpx;
			}
		}
	}
</style>
